<template>
  <AppPage fullViewport>
    <FormSearch
      :list="list"
      :data="data"
      :staticQuery="staticQuery"
      @search="(q) => (query = q)"
      @height-change="onHeightChange"
      @visible-change="onVisibleChange"
    >
      <template #k1="scope">
        <ElInput v-bind="scope" />
      </template>
      <template #k3="scope">
        <ElDatePicker v-bind="scope" />
      </template>
    </FormSearch>

    <div
      v-if="showOperation"
      :style="{
        height: `${operationHeight}px`,
        marginBottom: `${operationMB}px`,
        backgroundColor: '#f4f4f4',
      }"
    >
      <ElButton type="primary">操作区按钮</ElButton>
    </div>

    <TableMain
      :api="api"
      :columns="columns"
      :query="query"
      rowKey="id"
      :maxHeight="
        Math.max(
          bodyContentViewportHeight -
            (showOperation ? operationHeight + operationMB : 0) -
            (showSearch ? searchHeight + 10 : 0),
          200,
        )
      "
      :injectInfo="injectInfo"
      @loading-change="onLoadingChange"
    >
      <template #header-k3>
        <div style="color: red">自定义表头</div>
      </template>
      <template #k4="scope">
        <div style="color: blue">自定义显示{{ scope.row.k4 }}</div>
      </template>
      <template #EXTEND_TEST>展开测试 </template>
      <template #OPERATE>
        <div>这里是操作</div>
      </template>
    </TableMain>
  </AppPage>
</template>
<script lang="ts" setup>
import type { ExtractFormStringifyFromObject } from "@/components/form";
import { generateFormData } from "@/components/form";
import { BODY_CONTENT_VIEWPORT_HEIGHT } from "@/utils";
import type { FormData, SomeFormatFormData } from "./config";
import {
  list,
  staticQuery,
  columns,
  page1Api as api,
  injectInfo,
  showOperation,
} from "./config";

const loading = ref(false);

const data = ref(generateFormData(list));

const query = ref<
  ExtractFormStringifyFromObject<FormData, SomeFormatFormData> &
    typeof staticQuery
>({} as any);

const bodyContentViewportHeight = inject<number>(
  BODY_CONTENT_VIEWPORT_HEIGHT,
  500,
);

const searchHeight = ref(0);

const operationHeight = 50;

const operationMB = 10;

const showSearch = ref(false);

const onLoadingChange = (value: boolean) => {
  loading.value = value;
};

const onHeightChange = (height: number) => {
  searchHeight.value = height;
};

const onVisibleChange = (status: boolean) => {
  showSearch.value = status;
};
</script>
